<template>
  <div class="container">
    <leftTop></leftTop>
    <rightTop class="c23"></rightTop>
    <leftBottom></leftBottom>
    <centerBottom></centerBottom>
    <rightBottom></rightBottom>
  </div>
</template>

<script>
import leftTop from "./leftTop.vue";
import rightTop from "./rightTop.vue";
import leftBottom from "./leftBottom.vue";
import centerBottom from "./centerBottom.vue";
import rightBottom from "./rightBottom.vue";
export default {
  name: "showData",
  components: {
    leftTop,
    rightTop,
    leftBottom,
    centerBottom,
    rightBottom
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 2fr 3fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.c23 {
  grid-column: 2 / 4;
}
</style>
